<div class="page-main row around-xs">
  <div class="col-xs" ng-controller="ImageSelectionController as image">
    <div class="box text-center relative" os-dropzone="image.selectImageByPath($file)">

      <div class="center-block">
        <svg-icon contents="[ main.selection.getImageLogo() ]" paths="[ '../../assets/image.svg' ]"></svg-icon>
      </div>

      <div class="space-vertical-large">
        <image-selector
          has-image="main.selection.hasImage()"
          open-image-selector="image.openImageSelector"
          main-supported-extensions="image.mainSupportedExtensions"
          extra-supported-extensions="image.extraSupportedExtensions"
          show-selected-image-details="main.showSelectedImageDetails"
          image-name="main.selection.getImageName()"
          image-basename="image.getImageBasename()"
          reselect-image="image.reselectImage"
          flashing="main.state.isFlashing()"
          image-size="main.selection.getImageSize()"
        >
        </image-selector>
      </div>
    </div>
  </div>

  <div class="col-xs" ng-controller="DriveSelectionController as drive">
    <div class="box text-center relative">
      <div class="step-border-left" ng-disabled="main.shouldDriveStepBeDisabled()" ng-hide="main.state.isFlashing() && main.isWebviewShowing"></div>
      <div class="step-border-right" ng-disabled="main.shouldFlashStepBeDisabled()" ng-hide="main.state.isFlashing() && main.isWebviewShowing"></div>

      <div class="center-block">
        <svg-icon paths="[ '../../assets/drive.svg' ]"
          disabled="main.shouldDriveStepBeDisabled()"></svg-icon>
      </div>

      <div class="space-vertical-large">
        <div ng-if="!main.selection.hasDrive() && drive.shouldShowDrivesButton()">

          <div>
            <button class="button button-primary button-brick"
              tabindex="{{ main.selection.hasDrive() ? -1 : 2 }}"
              ng-disabled="main.shouldDriveStepBeDisabled()"
              ng-click="drive.openDriveSelector()">Select drive</button>
          </div>

        </div>
        <div ng-if="main.selection.hasDrive() || !drive.shouldShowDrivesButton()">

          <div class="step-selection-text"
            ng-class="{
              'text-disabled': main.shouldDriveStepBeDisabled()
            }">
            <span class="step-drive step-name"
              ng-class="{
                'text-warning': !main.selection.getSelectedDevices().length
              }"
              uib-tooltip="{{ drive.getDriveListLabel() }}">
              <!-- middleEllipsis errors on undefined, therefore fallback to empty string -->
              {{ drive.getDrivesTitle() | middleEllipsis:20 }}
            </span>
            <span class="step-drive step-warning glyphicon glyphicon-exclamation-sign"
              uib-tooltip="{{ main.constraints.getListDriveImageCompatibilityStatuses(main.selection.getSelectedDrives(), main.selection.getImage())[0].message }}"
              ng-show="main.constraints.hasListDriveImageCompatibilityStatus(main.selection.getSelectedDrives(), main.selection.getImage())"></span>
            <button class="button button-link step-footer"
              tabindex="{{ main.selection.hasDrive() ? 2 : -1 }}"
              ng-hide="main.state.isFlashing() || !drive.shouldShowDrivesButton()"
              ng-click="drive.reselectDrive()">Change</button>
            <span
              ng-if="main.selection.getSelectedDevices().length <= 1"
              ng-class="{
                'step-fill': !drive.shouldShowDrivesButton()
              }"
              class="step-drive step-size">
              {{ drive.getDrivesSubtitle() }}
            </span>
          </div>
        </div>
        <div ng-if="main.selection.getSelectedDevices().length > 1"
          ng-class="{
            'step-fill': !drive.shouldShowDrivesButton()
          }"
          class="step-drive step-list">
          <div ng-repeat="driveObj in drive.getMemoizedSelectedDrives()"
            uib-tooltip="{{ driveObj.description }} ({{ driveObj.displayName }})">
            {{ driveObj.description | middleEllipsis:14 }}
          </div>
        </div>
      </div>
    </div>
  </div>

  <div>
    <featured-project
      ng-class="{
        'fp-visible': main.state.isFlashing() && main.isWebviewShowing
      }"
      on-webview-show="main.setWebviewShowing"
    ></featured-project>
  </div>

  <div>
    <reduced-flashing-infos
      image-logo="main.selection.getImageLogo()"
      image-name="main.selection.getImageName() || main.getImageBasename() | middleEllipsis:16"
      image-size="main.selection.getImageSize() | closestUnit"
      drive-title="main.getDrivesTitle() | middleEllipsis:16"
      should-show="main.state.isFlashing() && main.isWebviewShowing"
    ></reduced-flashing-infos>
  </div>

  <div class="col-xs" ng-controller="FlashController as flash">
    <div class="box text-center">
      <div class="center-block">
        <svg-icon paths="[ '../../assets/flash.svg' ]"
          disabled="main.shouldFlashStepBeDisabled()"></svg-icon>
      </div>

      <div class="space-vertical-large">
        <progress-button
          tabindex="3"
          striped="main.state.getFlashState().type == 'check'"
          active = "main.state.isFlashing()"
          percentage="main.state.getFlashState().percentage"
          label="flash.getProgressButtonLabel()"
          disabled="main.state.getLastFlashErrorCode() || main.shouldFlashStepBeDisabled()"
          callback="flash.flashImageToDrive" >
        </progress-button>

        <button class="button button-link button-abort-write"
          ng-if="main.state.isFlashing()"
          ng-click="flash.cancelFlash()">
          <span class="glyphicon glyphicon-remove-sign"></span>
        </button>

        <p class="step-footer step-footer-split" ng-if="main.state.getFlashState().speed && main.state.getFlashState().percentage != 100">
          <span ng-bind="main.state.getFlashState().speed.toFixed(2) + ' MB/s'"></span>
          <span>ETA: {{ main.state.getFlashState().eta | secondsToDate | amDateFormat:'m[m]ss[s]' }}</span>
        </p>

        <div class="target-status-wrap" ng-if="main.state.getFlashState().failed">
          <div class="target-status-line target-status-failed">
            <span class="target-status-dot"></span>
            <span class="target-status-quantity">{{ main.state.getFlashState().failed }}</span>
            <span class="target-status-message">{{
              main.progressMessage.failed(main.state.getFlashState().failed)
            }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
